<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <#assign path="${springMacroRequestContext.getContextPath()}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${path}/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
    <style>
        .j{
            height: 725px;
            width: 100%;
            overflow: hidden;
        }
        .hz1{
            height: 665px;
            width: 200px;
            background-color: #393D49;
            float: left;
        }
        .hz1_1{
            height: 665px;
            width: 1319.2px;
            float: right;
            overflow: hidden;
        }
        .layui-form{
            margin: 0;
        }
    </style>
<body>

<div class="hz">
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>
<div class="hz1">

<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
    <li class="layui-nav-item"><a href="">首页</a></li>
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">商品信息</a>
        <dl class="layui-nav-child">
            <dd><a href="/type/list.html" >商品类型</a></dd>
            <dd><a href="/model/list.html">商品价格</a></dd>
            <dd><a href="/order/list.html">订单</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">用户信息</a>
        <dl class="layui-nav-child">
            <dd><a href="">用户账户后台数据</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">云市场</a></li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</div>
    <!--数据表-->
    <div class="hz1_1">
        <table class="layui-hide" id="type" lay-filter="test"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>




<script src="${path}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use('table', function(){
        var table = layui.table;
        var  $=layui.$;//得到jquery
        //渲染table
        var tableId=table.render({
            elem: '#type'
            ,url:'/type/'//转到category查询所有的方法/api
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg":res.msg,
                    "count":res.total,
                    "data": res.data//解析数据列表
                }}
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},//勾选框固定在最左侧
                {field:'id', width:80, title: '编号', sort: true}
                ,{field:'name', width:180, title: '类型'}
                ,{field:'createTime', width:280, title: '创造时间', sort: true,
                    templet:"<div>{{layui.util.toDateString(d.updateTime,'yyyy-MM-dd')}}</div>"
                }
                ,{field:'updateTime', width:280, title: '更新时间', sort: true,
                    templet:"<div>{{layui.util.toDateString(d.updateTime,'yyyy-MM-dd')}}</div>"
                }
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
                case 'insert':
                    layer.open({
                        type:2,
                        title:"新增饮品",
                        content:"/type/insert.html"
                        ,btn:["确定","取消"]
                        ,cancel:function(index) {//关闭页面刷新表格
                            // tableId.reload();
                            layer.close(index);
                        }
                        ,yes:function(index,layero) {
                            //得到form表单元素
                            let form= layero.find("iframe").contents().find("#ajaxForm");
                            //ajax请求，请求的地址是：/category/update_view
                            layer.close(index);//关闭弹出层
                            $.ajax({
                                type:"post",
                                url:"/type/save",
                                data:form.serialize(),
                                dataType:"json",
                                success:function(response){
                                    tableId.reload();//table重新加载（刷新）
                                }
                            })
                        }


                    })
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //添加代码在数据库中实现真正的删除
                    $.ajax({
                        type:"get",
                        url:"/type/delete?id="+data.id,
                        data:"",
                        dataType:"json",
                        success:function(response){
                            tableId.reload();//table重新加载（刷新）
                        }
                    })
                    // obj.del();//只是在页面中实现删除
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                //添加代码在数据库中实现编辑更新
                layer.open({
                    type:2,
                    title:"编辑分类",
                    content:"/type/edit.html?id="+data.id
                    ,btn:["确定","取消"]
                    ,cancel:function(index) {//关闭页面刷新表格
                        // tableId.reload();
                        layer.close(index);
                    }
                    ,yes:function(index,layero) {
                        //得到form表单元素
                        let form= layero.find("iframe").contents().find("#ajaxForm");
                        //ajax请求，请求的地址是：/category/update_view
                        layer.close(index);//关闭弹出层
                        $.ajax({
                            type:"post",
                            url:"/type/update",
                            data:form.serialize(),
                            dataType:"json",
                            success:function(response){
                                tableId.reload();//table重新加载（刷新）
                            }
                        })
                    }
       })
            }
        });
    });
</script>

</body>
</html>